<template>
	<view class="content">
		
		<view class="tool">
			<view class="button" @click="selectOption(0)" :class="0 === flag ? 'active-button' : ''">所有</view>
			<view class="button" @click="selectOption(1)" :class="1 === flag ? 'active-button' : ''">待兑换</view>
			<view class="button" @click="selectOption(2)" :class="2 === flag ? 'active-button' : ''">已兑换</view>
			<view style="clear: both;"></view>
		</view>
		
		<view v-if="list.length>0"  class="list" v-for="(item, index) in list" :key="index">
			<view class="item">
				<view class="element line1">
					<view class="status">{{item.status}}</view>
					<view class="time">{{item.dateTime}}</view>
				</view>
				
				<view class="element line1-1">
					<view class="getInfo getName" v-if="item.nickName != null && item.nickName.length>0">昵称：{{item.nickName}}</view>
					<view class="getInfo getTel" v-if="item.myCode != null && item.myCode.length>0">邀请码：{{item.myCode}}</view>
					<view class="getInfo getTel" v-if="item.exChangeTime != null && item.exChangeTime.length>0 && item.status == '已兑换'">兑换时间：{{item.exChangeTime}}</view>
				</view>
				
				<view class="element line2">
					<view class="desc img">
						<image :src="item.awardPic"></image>
					</view>
					<view class="desc txt">
						<view class="title">{{item.awardName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-show="isNoMore">暂无更多数据...</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				flag:0,
				isNoMore:false,
				list:[],
				page:1
			}
		},
		onShow() {
			//初始化
			this.list = [];
			this.getData(1);
		},
		methods:{
			selectOption(val){
				this.flag = val;
				this.getData(1);
			},
			getData(page){
				this.list = [];
				this.isNoMore = false;
				let opts = {
					url: 'shoptool/getShopExchangeDetail/'+page+'/'+this.flag,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					if(rData.length ==0){
						uni.showToast({
							title: '暂无更多数据...',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isNoMore = true;
						return;
					}
					for (let i = 0; i < rData.length; i++) {
						this.list.push(rData[i]);
					}
				}, error => {})
			}
		},
		onReachBottom(){
			this.page++;
			this.getData(this.page);
		}
	} 
</script>

<style>
	
	
	.response{
		width: 50rpx;
		height: 50rpx;
		margin-left: 125rpx;
		margin-top: 20rpx;
	}
	
	.nullData{
		text-align: center;
		margin-top: 50rpx;
	}
	.nullData image{
		width: 360rpx;
		height: 360rpx;
	}
	
	.element .desc{
		float: left;
	}
	.line3 .note{
		color: #999999;
		font-size: 28rpx;
		width: 520rpx;
	}
	.line3 .code{
		background-color: #007AFF;
		color: #fff;
		margin-left: 10rpx;
		font-size: 30rpx;
		border-radius: 20rpx;
		padding: 5rpx 20rpx;
	}
	.line2 .img{
		width: 120rpx;
	}
	
	.line2 .desc{
		float: left;
	}
	.status{
		float: left;
		font-size: 32rpx;
		font-weight: 800;
	}
	.line2 .txt{
		width: 520rpx;
	}
	.time{
		float: right;
		font-size: 28rpx;
	}
	.line1{
		overflow: hidden;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding-bottom: 10rpx;
	}
	.item{
		width: 670upx;
		background-color: #fff;
		margin: 10rpx 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	image{
		width: 100rpx;
		height: 100rpx;
	}
	.element{
		overflow: hidden;
	}
	.element .getInfo{
		font-size: 30rpx;
		margin: 8rpx;
	}
	
	
	.tool{
		margin-bottom: 30rpx;
	}
	.button {
		padding: 10px 0upx;
		float: left;
		font-size: 30rpx;
		width: 210upx;
		margin-left: 30upx;
		margin-top: 30upx;
		background-color: #fff;
		text-align: center;
		border-radius: 10rpx;
		color: #007AFF;
		border: 2upx solid #007AFF;
	}
	
	.active-button {
		background-color: #007AFF;
		color: #ffffff;
	}
	
</style>
